<!DOCTYPE html>
<html>
	<head>
		<meta content="text/html;" charset="utf-8"  http-equiv="Content-Type"/>
		<title>BZE</title>
		<meta name="keywords" content="BZE,BZE，VS HOLIDAY,V.S HOLIDAY">
        <meta name="description" content="VS男装,V.S BZE，BZE，BZE，BZE">
        <meta name="mobile-agent" content="format=xhtml;url=">
        <meta name="mobile-agent" content="format=html5;url=">
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/responsiveslides.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/plyr.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/scrollReveal.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
       	<link rel="stylesheet" type="text/css" href="css/plyr.css"/>
       	<link rel="stylesheet" href="css/common.css" />
       	<link rel="stylesheet" type="text/css" href="css/product.css"/>
	</head>
	<body>
		<div class="navbar-fixed-top" id="header">
		    <div class="nav">
		        <ul>
		        		<li><img src="img/logo.png" alt="" /></li>
		            <li id=""><a href="index.html">首页</a></li>
		            <li id="" class="active"><a href="product.html">产品</a></li>
		            <li id=""><a href="brand.html">品牌</a></li>
		            <li id=""><a href="story.html">故事</a></li>
		            <li id=""><a href="alliance.html">联盟</a></li>
		            <li><a href="https://www.tmall.com/" target="_blank">商城</a></li>
		        </ul>
		    </div>
		</div>
		
		<div id="top" class="callbacks_container">
	        <div>
	        		<img style="width: 100%;" src="img/product.jpg" alt="" />
	        </div>
	    </div>
	    
        <div class="section">
			<div class="container">
				<div class="bg1">
					<div class="col-md-4" data-scroll-reveal="enter left over 1s and move 200px after 0s">
						<img src="img/product1.jpg" alt="doctor" title="doctor" class="imgclass"/>
					</div>
					<div class="col-md-4">
					</div>
					<div class="col-md-4" data-scroll-reveal="enter right over 1s and move 200px after 0s">
						<img src="img/product2.jpg" alt="doctor" title="doctor" class="imgclass"/>
					</div>
				</div>
			</div>
		</div>		
		<div class="section">
			<div class="container">
				<div class="bg2">
					<div class="col-md-4" data-scroll-reveal="enter left over 1s and move 200px after 0s">
						<img src="img/product3.jpg" alt="doctor" title="doctor" class="imgclass"/>
					</div>
					<div class="col-md-4">
					</div>
					<div class="col-md-4" data-scroll-reveal="enter right over 1s and move 200px after 0s">
						<img src="img/product4.jpg" alt="doctor" title="doctor" class="imgclass"/>
					</div>
				</div>
			</div>
		</div>		
		<div class="section">
			<div class="container">
				<div class="bg3">
					<div class="col-md-4" data-scroll-reveal="enter left over 1s and move 200px after 0s">
						<img src="img/product5.jpg" alt="doctor" title="doctor"  class="imgclass"/>
					</div>
					<div class="col-md-4">
					</div>
					<div class="col-md-4" data-scroll-reveal="enter right over 1s and move 200px after 0s">
						<img src="img/product6.jpg" alt="doctor" title="doctor"  class="imgclass"/>
					</div>
				</div>
			</div>
		</div>		
		
		<div class="result" id="outdiv">
		    <div class="indiv">
		        <img class="imgresult" id="bigimg" src="">
		    </div>  
		</div> 
		
		<div class="clearfix"></div>
			
        <div style="margin-top: 10px;">
	        	<div class="container" id="video_mode">
	        		<div class="video" data-scroll-reveal="enter top over 1s and move 200px after 0s" data-scroll-reveal-id="1" style="-webkit-transform: translatey(-200px);transform: translatey(-200px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;" data-scroll-reveal-initialized="true">
	                <div tabindex="0" class="plyr plyr--video plyr--fullscreen-enabled plyr--stopped plyr--ready">
					<div class="plyr__video-wrapper" style="cursor: pointer;">
						<div class="plyr__captions"></div>
						<video class="embed-responsive-item plyr--setup" poster="img/video_show.png">
							<source src="http://vs-holiday.com/res/201803/1a9e109aa437bd9a2a40a02f9864bd6f.mp4" type="video/mp4">
						</video>
					</div>
					<button type="button" data-plyr="play" class="plyr__play-large" aria-label="Play"><svg><use xlink:href="#plyr-play"></use></svg><span class="plyr__sr-only">Play</span></button>
					<div class="plyr__controls"><button type="button" data-plyr="play" aria-label="Play"><svg><use xlink:href="#plyr-play"></use></svg><span class="plyr__sr-only">Play</span></button><button type="button" data-plyr="pause"><svg><use xlink:href="#plyr-pause"></use></svg><span class="plyr__sr-only">Pause</span></button><span class="plyr__progress"><label for="seek6523" class="plyr__sr-only">Seek</label><input id="seek6523" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek"><progress class="plyr__progress--played" max="100" value="0" role="presentation"></progress><progress class="plyr__progress--buffer" max="100" value="7.05"><span>7.05</span>% buffered</progress><span class="plyr__tooltip">00:00</span></span><span class="plyr__time"><span class="plyr__sr-only">Current time</span><span class="plyr__time--current">00:39</span></span><button type="button" data-plyr="mute" aria-pressed="false"><svg class="icon--muted"><use xlink:href="#plyr-muted"></use></svg><svg><use xlink:href="#plyr-volume"></use></svg><span class="plyr__sr-only">Toggle Mute</span></button><span class="plyr__volume"><label for="volume6523" class="plyr__sr-only">Volume</label><input id="volume6523" class="plyr__volume--input" type="range" min="0" max="10" value="10" data-plyr="volume"><progress class="plyr__volume--display" max="10" value="10" role="presentation"></progress></span><button type="button" data-plyr="captions"><svg class="icon--captions-on"><use xlink:href="#plyr-captions-on"></use></svg><svg><use xlink:href="#plyr-captions-off"></use></svg><span class="plyr__sr-only">Toggle Captions</span></button><button type="button" data-plyr="fullscreen" aria-pressed="false"><svg class="icon--exit-fullscreen"><use xlink:href="#plyr-exit-fullscreen"></use></svg><svg><use xlink:href="#plyr-enter-fullscreen"></use></svg><span class="plyr__sr-only">Toggle Fullscreen</span></button></div>
					</div>
	            </div>
	        </div>
        </div>
		
		<div class="footer-b">
		    <div class="container">
		        <div id="info_left">
		        		<ul class="clearfix">
		                <li><a href="index.html">首页</a></li>
		                <li><a href="product.html">产品</a></li>
		                <li><a href="brand.html">品牌</a></li>
		                <li><a href="story.html">故事</a></li>
		                <li><a href="alliance.html">联盟</a></li>
		                <li><a href="http://www.tmall.com">商城</a></li>
			        </ul>
			        <ul id="detail_info">
		                <li>
		                		<i><img src="img/phone.png" alt="" /></i>
		                		<span>020-83702003</span>
		                </li>
		                <br />
		                <li>
		                		<i><img src="img/email.png" alt="" /></i>
		                		<span>943042657@qq.com</span>
		                </li>
		                <br />
		                <li>
		                		<i><img src="img/location.png" alt="" /></i>
		                		<span>广州市白云区石槎路长盛国际商贸园A区J42</span>
		                </li>
			        </ul>
		        </div>
		        <div id="info_right">
		        		<p>滨哲尔官方微信</p>
		        		<img src="img/qrcode.png" alt="" />
		        		<p>扫码关注，惊喜等着你</p>
		        </div>
		    </div>
		
		</div>
	    
	</body>
	
	<script>plyr.setup();</script>
    <script>
        (function () {
            window.scrollReveal = new scrollReveal({reset: true, move: '50px'});
        })();
    </script>
	<script type="text/javascript">
		function showImg(outdiv,indiv,bigimg,thiselement){
		    var winW = $(window).width();
		    var winH = $(window).height();
		    var src = $(thiselement).attr('src');
		    $(bigimg).attr("src",src);
		    $("<img/>").attr("src",src).load(function(){
		        var imgW = this.width; 
		        var imgH = this.height;
		        var scale= imgW/imgH;
		        if( imgW > winW ){
		            $(bigimg).css("width","100%").css("height","auto");
		            imgH = winW/scale;
		            var h=(winH-imgH)/2;            
		            $(indiv).css({"left":0,"top":h});
		        }else{        
		            $(bigimg).css("width",imgW+'px').css("height",imgH+'px');
		            var w=(winW-imgW)/2;
		            var h=(winH-imgH)/2;      
		            $(indiv).css({"left":w,"top":h});
		        }
		              
		        $(outdiv).fadeIn("fast");
		        $(outdiv).click(function(){
		            $(this).fadeOut("fast");
		        });                             
		    });
		}
		$('.imgclass').click(function(){
		    var thiselement=$(this);
		    showImg("#outdiv",".indiv","#bigimg",thiselement);
		});    
	</script>
	
</html>
